<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="进行中" name="first">
      <UpComing ref = "UpComing"></UpComing>
    </el-tab-pane>
    <el-tab-pane label="未完成" name="second">
      <Running ref = "Running"></Running>
      </el-tab-pane>
    <el-tab-pane label="已完成" name="third">
      <HistoryList ref = "HistoryList"></HistoryList>
      </el-tab-pane>
  </el-tabs>
</template>
<script>
  import UpComing from './form/upcoming.vue'
  import HistoryList from './HistoryList.vue'
  import Running from './RunningList.vue'
  export default {
    data () {
      return {
        activeName: 'first'
      }
    },
    components: {
      UpComing,
      HistoryList,
      Running
    },
    methods: {
      handleClick (tab, event) {
        console.log(tab, event)
      }
    }
  }
</script>